<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>
        layui在线调试
    </title>
    <link rel="stylesheet" href="../../layuiadmin/layui-v2.5.5/layui/css/layui.css" media="all" type="text/css">
    <style type="text/css">
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
        .input{height:35px;width:110px}
        .ss{
               position: absolute;
               left: 840px;
               top: 10px;
               z-index:111111;
           }
        .sw{
            position: absolute;
            left: 910px;
            top: 10px;
            z-index:111111;
        }
        .sc{
            position: absolute;
            left: 980px;
            top: 10px;
            z-index:111111;
        }
        .down-panel{
            padding: 0;
            z-index: 100;
            overflow:visible;
        }
        .down-panel .layui-select-title{
            padding-right:30px;
            padding-left:10px;
            overflow:visible;
        }
        .down-panel dl{
            color: #000;
            top: 30px;
            font-size: 14px;
        }
        .down-panel .layui-select-title i{
            border-top-color:#fff;
        }
        .down-panel:hover{
            opacity:1 !important;
            filter:alpha(opacity=100) !important;
            color:#fff
        }
        .layui-anim-upbit{
            top: 100% !important;
            z-index: 999999 !important;
        }
        .layui-anim-upbit dd {
            text-align: left;
        }
        .over-hover{
            overflow: visible; z-index: 9999;
        }
        .layui-select-title{
            background-color: #008FBF;
        }
        .layui-table-box{
            overflow: visible;!important;
        }
        .layui-table-body{
            overflow: visible;!important;
        }
    </style>
</head>
<body bgcolor="white">
<div class="layui-form" id="form">
    <div class="demoTable">
        <i class="layui-icon"></i>
        <div class="layui-inline">
            <input name="name" class="layui-input input" id="empName1" placeholder="请输入姓名" autocomplete="off">
        </div>
        <div class="layui-inline">
            <input name="name" class="layui-input input" id="empPhone" placeholder="手机号码" autocomplete="off">
        </div>
        <div class="layui-inline" style="width: 180px">
            <select style="width:0px;" name="empPosition" id="empPosition" lay-verify="required">
                <option value="">
                    选择身份
                </option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="empEntryDate" placeholder="入职时间" placeholder="yyyy-MM-dd">
        </div>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="empContEnddate" placeholder="合同到期时间" placeholder="yyyy-MM-dd">
        </div>
            <div class="button1 ss">
                <button class=" layui-btn" data-type="reload">
                    <i class="layui-icon layui-icon-search" style="font-size: 15px; color: #F2F2F2;"></i>
                </button>
            </div>
        <div class="layui-card-body">    
        	<table class="layui-hide" id="demo" lay-filter="test"></table>
        </div>
        </div>
    <script src="../../layuiadmin/layui-v2.5.5/layui/layui.js" type="text/javascript">
    </script> <script type="text/javascript" src="../../layuiadmin/lib/jquery.min.js">
    </script> <script type="text/javascript">
        //格式转换
        function createrFormat(o){
            return o;
        }
        var msg=null;
        layui.config({
            version: '1554901097999' //为了更新 js 缓存，可忽略
        });
        layui.use(['form','jquery','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','layedit',], function(){
            $=layui.jquery;
            var laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,form = layui.form
                ,layedit=layui.layedit
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,element = layui.element //元素操作
                ,slider = layui.slider //滑块
                ,laydate = layui.laydate
            //执行一个 table 实例
            table.render({
                elem: '#demo'
                ,url: 'http://localhost:8080/HrEmp/listALl' //数据接口
                ,title: '用户表'
                ,method:'post'
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type:'checkbox',title:'全选', fixed: 'left',width:'12.5%'}
                    ,{field:'empPosition', width:'12.5%', title: '身份'}
                    ,{field:'empName', width:'12.5%', title: '姓名', sort: true}
                    ,{field:'empPhone',title: '手机号码', width:'12.5%' }
                    ,{field:'empEntryDate',title:'入职时间',width:'12.5%'}
                    ,{field:'empContEnddate',title:'合同到期时间',width:'12.5%' }
                    ,{field:'empWorkstatus',title:'在职状态',width:'12.5%' }
                    ,{field:'empBirthdate', width:'12.5%', title: '出生日期', sort: true}
                ]],
                id:"listData"
            });
            
            laydate.render({
                elem: '#empEntryDate'
            });
            laydate.render({
                elem: '#empContEnddate'
            });
			table.on('checkbox(test)', function(obj){
			  if(obj.checked==true){
			  	if(obj.type=="all"){
			  		alert("不可全选！");
			  		var state = $("#stateclient").val();
  					var casetext1 = $("#casetext").val();
			  		table.reload('clients',{
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            stateclient:state,
		    				casetext:casetext1
                        }
                        });
			  	}else{
			  		msg= obj.data.empName;
			  		window.parent.$("input[id='empname1'").val(msg);
			  		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index); //再执行关闭  
			  		
			  	}
			  }else{
			  }
			});
			var $ = layui.$, active = {
                reload: function(){
                    //            var demoReload = $('#demoReload');
                    //            var department = $('#department');
                    //
                    //执行重载
                    table.reload('listData', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            empName:$('#empName1').val(),
                            empPhone:$('#empPhone').val(),
                            empPosition:$('#empPosition').val(),
                            empEntryDate:$('#empEntryDate').val(),
                            empContEnddate:$('#empContEnddate').val(),
                        }
                    });
                }
            };
            $(function(){
                //
                var $browsers = $("input[name=sex]");
                var $cancel = $("#sex");
                var $byhide = $("#byhide");
                var $remove = $("#remove");
                //
                $byhide.click(function(e){
                    // 切换到一个隐藏域,两种方式均可
                    //$("#hidebrowser").attr("checked",true);
                    $("#hidebrowser").attr("checked","checked");
                });
            });
            //身份
            $(function(){
                $.ajax({
                    type:"POST",
                     url:"http://localhost:8080/HrEmp/position",
                    datatype: "json",//“xml”, “html”, “script”, “json”, “jsonp”, “text”.
                    success:function(data){
                        $.each(data,function(index,item){
                            $('#empPosition').append("<option value="+item.hrPositionName+">"+item.hrPositionName+"<\/option>");
                        });
                        layui.form.render("select");
                    },error:function(){
                        alert("失败")
                    }
                });
            })

            //分页
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 100 //总页数
                ,skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });
            
            
            $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
                var index = $(this).attr('data-index');
                var tableBox = $(this).parents('.layui-table-box');
                //存在固定列
                if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                    tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
                } else {
                    tableDiv = tableBox.find(".layui-table-body.layui-table-main");
                }
                var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length>0) {
                    checkCell.click();
                }
            });

            $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                e.stopPropagation();
            });

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
    </div>
</div>
</body>
</html>